<template>
  <div class="record">
    <van-tabs color="#008fef" v-model="active" @click="onClick">
      <van-tab title="使用记录"></van-tab>
      <van-tab title="系统赠送记录"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="tickets.length > 0">
        <TicketRecordItem v-for="(item, index) in tickets" :key="index" :ticket="item"/>
      </template>
      <template v-else>
        <template v-if="isLoad">
          <EmptyTips text="无使用记录" mWidth="30" mHeight="30" :image="NoTicketEmpty"/>
        </template>
      </template>
    </van-list>
  </div>
</template>

<script>
import api from "../../api";
import TicketRecordItem from "@/components/ticketrecord/TicketRecordItem";
import EmptyTips from "@/components/common/EmptyTips";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";
var onLoadTimer = null;
export default {
  bodyClass: "gray-bg",
  components: {
    TicketRecordItem,
    EmptyTips
  },
  data() {
    return {
      NoTicketEmpty,
      uid: this.$store.state.uid,
      tickets: [],
      loading: false,
      finished: false,
      page: 1,
      isLoad: false,
      active: 0
    };
  },
  methods: {
    onClick(index, title) {
      this.isLoad = false;
      console.log(index);
      this.active = index;
      this.listClear();
      this.onLoad();
    },
    listClear() {
      this.page = 1;
      this.tickets = [];
    },
    onLoad() {
      window.clearTimeout(onLoadTimer);
      if (this.active == 0) {
        onLoadTimer = window.setTimeout(() => {
          api.usercenter.getTicketUsedRecord(this.uid, this.page, res => {
            console.log(res)
            this.isLoad = true;
            if (res.pager.totalPages <= res.pager.nowPage) {
              this.loading = false;
              this.finished = true;
            }

            if (res.list.length < 1) {
              this.finished = true;
            }

            for (var i = 0; i < res.list.length; i++) {
              this.tickets.push(res.list[i]);
            }
            this.page += 1;
            this.loading = false;
          });
        }, 200);
      } else {
        onLoadTimer = window.setTimeout(() => {
          api.usercenter.getSystemGive(this.uid, this.page, res => {
            this.isLoad = true;
            if (res.pager.totalPages <= res.pager.nowPage) {
              this.loading = false;
              this.finished = true;
            }

            if (res.list.length < 1) {
              this.finished = true;
            }

            for (var i = 0; i < res.list.length; i++) {
              this.tickets.push(res.list[i]);
            }
            this.page += 1;
            this.loading = false;
          });
        }, 200);
      }
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
</style>